<template>
  <div>
    <section class="z-container">
      <z-head :has-back="hasBack" :title="title"></z-head>
      <div class="z-main">
        <slot name="main"></slot>
      </div>
      <z-foot :selected-item="selectedItem"></z-foot>
    </section>
    <z-loading :show="loading"></z-loading>
  </div>
</template>

<script>
  import ZHead from '@/components/header/head'
  import ZFoot from '@/components/footer/foot'
  import ZLoading from '@/components/loading'

  export default {
    props:{
      hasBack:{
        type: Boolean,
        default: false,
      },
      loading:{
        type:Boolean,
        default:false,
      },
      title:{
        type:String,
        default:'news',
      },
      selectedItem:{
        type: Number,
        default:2,
      }
    },
    components:{
      ZHead,ZFoot,ZLoading
    }
  }
</script>

<style lang="less" scoped>
  .z-container{
    height: 100vh;
    display: flex;
    flex-direction:column;
    .z-main{
      flex:1;
      padding: 0 .4rem;
      overflow-y: auto;
    }
  }
</style>